<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/swiper/swiper.min.css" />
		<style type="text/css">
			.active-area.aui-content {
				margin-bottom: 0;
			}
			.active-area .aui-list-view {
				margin-bottom: 0 !important;
			}
			.aui-list-view:after {
				border-top: 0;
			}
			.aui-list-view:before {
				border-top: 0;
			}
			.image img {
				width: 100%
			}
			p {
				font-size: 12px;
				margin-bottom: 5px;
			}
			.content {
				font-size: 12px;
				color: #555;
			}
			.active-area {
			}
			.aui-iconfont {
				color: #ffffff;
			}
			.aui-list-view-cell:active {
				background: #f4f4f4;
			}
			.aui-bg-1f518b {
				background: #1f518b;
			}
			.aui-bg-b5292a {
				background: #b5292a;
			}
			.aui-bg-dedede {
				background: #dedede;
			}
			.aui-bg-0b5743 {
				background: #0b5743;
			}
			.aui-color-bbb {
				color: #bbb !important;
			}
			#nice-articles li {
				margin: 5px 0 0 0;
				background: #fff;
				padding: 8px;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-flex-flow: row;
				flex-flow: row;
				width: 100%;
			}
			#nice-articles {
			}
			#nice-articles li .article-info {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				position: relative;
			}
			#nice-articles li .article-info p {
				color: #333;
				font-size: 15px;
				height: 46px;
			}
			#nice-articles li .article-info  span {
				display: block;
				font-size: 10px;
				color: #999;
			}
			#nice-articles li .article-info  span label{
				float: right;
			}
			.article-img {
				width: 98px;
				height: 64px;
				margin-left: 8px;
			}
			.active-ars {
				display: inline-block;
				font-size: 10px;
				color: #fff;
				background: #999;
				padding: 1px 3px;
				vertical-align: middle;
				margin-right: 8px;
			}
			.aui-ellipsis-2 {
				padding-right: 5px !important;
			}
			#nice-articles li:active, li.aui-list-view:active {
				background: #f4f4f4;
			}
			/* 幻灯片 */
			.banner-container {
				width: 100%;
				height: 150px;
			}
			.banner-container .swiper-slide {
				background-position: center;
				background-size: cover;
				-webkit-background-size: cover;
			}
			.banner-container .swiper-pagination {
				bottom: 0;
			}
			/* 幻灯片 结束 */
			.demo-list {
				padding: 10px 0;
				background: #fff;
				min-height: 0;
				height: auto;
				overflow: hidden;
				margin-bottom: 5px;
			}
			.demo-list ul li {
				width: 20%;
				float: left;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				display: box;
				box-orient: horizontal;
				box-pack: center;
				box-align: center;
				padding: 8px 0 5px 0;
			}
			.demo-list ul li:active {
				background: #f4f4f4;
			}
			.content-area {
				width: 100%;
			}
			.content-area p {
				width: 42px;
				height: 42px;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				display: box;
				box-orient: horizontal;
				box-pack: center;
				box-align: center;
				border-radius: 15px;
				-webkit-border-radius: 15px;
				margin: 0 auto;
			}
			.content-area p i {
				color: #fff;
				font-size: 24px;
			}
			.content-area span {
				display: block;
				padding: 5px 0 0 0;
				font-size: 13px;
				color: #666;
				text-align: center;
			}
			.o2o {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-flex-flow: row;
				flex-flow: row;
				width: 100%;
				background: #ffff;
				margin-bottom: 5px;
			}
			.o2o-item {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				height: 150px;
				text-align: center;
				line-height: 0;
				color: #fff;
				font-size: 20px;
			}
			.o2o-item:nth-child(1) {
				margin-right: 3px;
				background: url(../../image/hd.png) no-repeat left top;
				background-size: cover;
				-webkit-background-size: cover;
			}
			.o2o-item:nth-child(2) {
				margin-left: 2px
			}
			.item-item {
				height: 73px;
				width: 100%;
				text-align: center;
				color: #fff;
				font-size: 20px;
				line-height: 0;
			}
			.item-item:nth-child(1) {
				margin-bottom: 5px;
				height: 72px;
				background: url(../../image/jc.png) no-repeat left top;
				background-size: cover;
				-webkit-background-size: cover;
			}
			.item-item:nth-child(2) {
				background: url(../../image/sc.png) no-repeat left top;
				background-size: cover;
				-webkit-background-size: cover;
			}
			.aui-bg-fd6e90 {
				background: #fd6e90;
			}
			.aui-bg-b789fd {
				background: #b789fd;
			}
			.aui-bg-67d2f8 {
				background: #67d2f8;
			}
			.aui-bg-96e462 {
				background: #96e462;
			}
			.aui-bg-ffc74e {
				background: #ffc74e;
			}
		</style>
	</head>
	<body>
		<div class="banner-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" style="background-image:url(../../image/banner.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(../../image/banner2.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(../../image/banner.jpg)"></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="demo-list">
			<ul>
				<li data-funcName="layout_head">
					<div class="content-area">
						<p class="aui-bg-fd6e90">
							<i class="aui-iconfont iconfont icon-ui"></i>
						</p>
						<span>WinUI</span>
					</div>
				</li>
				<li data-funcName="business_head">
					<div class="content-area">
						<p class="aui-bg-b789fd">
							<i class="aui-iconfont iconfont icon-25"></i>
						</p>
						<span>商圈</span>
					</div>
				</li>
				<li  data-funcName="doudou_head">
					<div class="content-area">
						<p class="aui-bg-67d2f8">
							<i class="aui-iconfont iconfont icon-duanzi"></i>
						</p>
						<span>找乐</span>
					</div>
				</li>
				<li  data-funcName="library_head">
					<div class="content-area">
						<p class="aui-bg-96e462">
							<i class="aui-iconfont iconfont icon-4259"></i>
						</p>
						<span>书堆</span>
					</div>
				</li>
				<li  data-funcName="game_head">
					<div class="content-area">
						<p class="aui-bg-ffc74e">
							<i class="aui-iconfont iconfont icon-youxi"></i>
						</p>
						<span>游戏</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="o2o">
			<div class="o2o-item"  onclick="H.$alert('苦逼程序猿，正在疯狂加班中……');"></div>
			<div class="o2o-item">
				<div class="item-item" onclick="H.$alert('苦逼程序猿，正在疯狂加班中……');"></div>
				<div class="item-item" onclick="H.$alert('苦逼程序猿，正在疯狂加班中……');"></div>
			</div>
		</div>
		<div class="aui-content active-area">
			<ul>
				<li class="aui-list-view" tapmode onclick="H.$openWin('case_view_head', 'case_view_head.html');">
					<div class="aui-col-xs-12 aui-padded-5" style="padding: 8px 5px;">
						<label class="active-ars">活动</label>点点例征集共同开发人员啦！
					</div>
					<div class="aui-col-xs-12 image">
						<img src="../../image/active_g.jpg" data-echo="../../image/active.jpg">
					</div>
					<div class="aui-col-xs-12 aui-ellipsis-2 aui-padded-5 content">
						点点例目前由新生帝本人开发，毕竟一个人的精力和能力是有限的，本次征集是希望能够有更多开发者的加入，一起完善它，让它更加强大！
					</div>
					<p class="aui-padded-5">
						<span class="aui-pull-left">点点例  &nbsp;2016-01-20 01:12</span>
						<span class="aui-pull-right"><i class="iconfont icon-shoucangweishoucang"></i> 30</span>
					</p>
				</li>
			</ul>
		</div>
		<div class="aui-content" style="margin-bottom: 5px;">
			<ul id="nice-articles">
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							美团大众点评宣布完成超33亿美金融资
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							真是韩国双雄：三星S7与LG G5齐曝光
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							19岁小伙冒充网管盗窃财物：流窜多个网吧
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							微软：解决Win10 WSClient问题可重置应用商店
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							nubia布拉格S开箱初体验： 颜值和手感担当
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							美国最大在线电影网站Netflix CEO：希望尽快入华
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							心疼！日本女高中生大雪天校服短裙露大腿
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							腾讯QQ儿童智能鞋登场
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							2015年最畅销电动车品牌：竟然是中国厂商
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
				<li>
					<div class="article-info">
						<p class="aui-ellipsis-2">
							爆料：美团大众点评已完成33亿美元融资创记录
						</p>
						<span>新生帝 &nbsp;&nbsp;&nbsp;<label>2016-01-19 23:22:10</label></span>
					</div>
					<img src="../../image/rec.jpg" data-echo="../../image/rec_l.jpg" alt="" title="" class="article-img" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/AHelper.js"></script>
	<script type="text/javascript" src="../../script/zepto.min.js"></script>
	<script type="text/javascript" src="../../script/echo.min.js"></script>
	<script type="text/javascript" src="../../script/swiper/swiper.min.js"></script>
	<script type="text/javascript">
		var swiper = new Swiper('.banner-container', {
			pagination : '.swiper-pagination',
			effect : 'cube',
			grabCursor : true,
			cube : {
				shadow : false
			},
			autoplay : 4000,
			autoplayDisableOnInteraction : false,
			loop : true
		});
		echo.init({
			offset : 100,
			throttle : 250,
			unload : false,
			callback : function(element, op) {
			}
		});
		Zepto(function() {
			$(".demo-list").on("tap", "li", function() {
				var funcName = $(this).attr("data-funcName");
				if (funcName) {
					H.$openWin(funcName, funcName + '.html');
				} else {
					H.$alert("苦逼程序猿，正在疯狂加班中……");
				}
			});
			$("#nice-articles").on("tap", "li", function() {
				H.$openWin('case_view_head', 'case_view_head.html');
			});
		});
		H.ready(function() {
		});
	</script>
</html>